<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="{{asset('bootstrap-3.3.7/docs/favicon.ico')}}">

    <title>{{$blog_info->title}} - Missfizz的博客</title>

    <!-- Bootstrap core CSS -->
    <link href="{{asset('bootstrap-3.3.7/docs/dist/css/bootstrap.min.css')}}" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="{{asset('bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css')}}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="{{asset('bootstrap-3.3.7/docs/examples/blog/blog.css')}}" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="{{asset('bootstrap-3.3.7/docs/assets/js/ie-emulation-modes-warning.js')}}"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- CSS -->
    <link href="{{asset('css/blog.css')}}" rel="stylesheet">
  </head>

  <body>

    <div class="blog-masthead">
      <div class="container">
        <nav class="blog-nav">
          <a class="blog-nav-item active" href="{{url('blog/index')}}">首页</a>
          @if(session('user_id'))
          <a class="blog-nav-item" href="{{url('blog/home')}}">您好，{{session('user_name')}}</a>
          @else
          <a class="blog-nav-item" href="{{url('blog/login')}}">登录</a>
          @endif
          <!--<a class="blog-nav-item" href="{{url('blog/signout')}}">Sign Out</a>-->
        </nav>
      </div>
    </div>

    <div class="container" style="margin-top:30px;">

      <!--<div class="blog-header">
        <h1 class="blog-title"></h1>
        <p class="lead blog-description"></p>
      </div>-->

      <div class="row">

        <div class="col-sm-8 blog-main">

          <div class="blog-post">
            <h2 class="blog-post-title">{{$blog_info->title}}</h2>
            <p class="blog-post-meta">{{$blog_info->add_time}}，<a href="#">{{$blog_info->author}}</a></p>
			      {!! $blog_info->content !!}
          </div><!-- /.blog-post -->

          <!--<nav>
            <ul class="pager">
              <li><a href="#">上一篇</a></li>
              <li><a href="#">下一篇</a></li>
            </ul>
          </nav>-->
          <div>
            <a href="JavaScript:;" data-opt="praise">
              <span data-type="heart" class="glyphicon @if($blog_info->praise_status)glyphicon-heart @else glyphicon-heart-empty @endif"></span>
              <span>(<font data-field="praise_num">{{$blog_info->praise_num}}</font>)</span>
              <span>给我点赞</span>
            </a>
          </div>

          <table class="table">
             <caption>留言（155）</caption>
             <!--<thead>
                <tr>
                   <th>名称</th>
                   <th>城市</th>
                </tr>
             </thead>-->
             <tbody>
                <tr>
                   <td>匿名：哎呦不错哦！</td>
                </tr>
                <tr>
                   <td>匿名：哎呦不错哦！</td>
                </tr>
             </tbody>
          </table>

          <form role="form">
            <div class="form-group">
              <label for="name">我要发表意见</label>
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              <div class="text-right">
                <button type="submit" class="btn btn-default">发布留言</button>
              </div>
            </div>
          </form>

        </div><!-- /.blog-main -->

        <div class="col-sm-3 col-sm-offset-1 blog-sidebar">
          <div class="sidebar-module sidebar-module-inset">
            <h4>通知</h4>
            <p>网站为开发试用阶段，如您在使用过程中发现任何问题都可与我联系，为了完善系统，您的每一个建议都异常宝贵。<br/>Email: <a href="mailto:missfizzone@gmail.com">missfizzone@gmail.com</a></p>
          </div>
          <div class="sidebar-module">
            <h4>热门文章</h4>
            <ol class="list-unstyled">
              @foreach($blog_list as $blog)
              <li>- <a href="{{url('blog/detail', $blog->article_id)}}">{{ str_limit($blog->title, 25, '...') }}</a></li>
              @endforeach
            </ol>
          </div>
          <!--<div class="sidebar-module">
            <h4>Elsewhere</h4>
            <ol class="list-unstyled">
              <li><a href="#">GitHub</a></li>
              <li><a href="#">Twitter</a></li>
              <li><a href="#">Facebook</a></li>
            </ol>
          </div>-->
        </div><!-- /.blog-sidebar -->

      </div><!-- /.row -->

    </div><!-- /.container -->

    <footer class="blog-footer">
      <p>Blog application built for <a href="#">Imfaker</a> by <a href="#">@missfizz</a>.</p>
      <p>
        <!--<a href="#">Back to top</a>-->
      </p>
    </footer>


    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="{{asset('bootstrap-3.3.7/docs/assets/js/vendor/jquery.min.js')}}"></script>
    <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
    <script src="{{asset('bootstrap-3.3.7/docs/dist/js/bootstrap.min.js')}}"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="{{asset('bootstrap-3.3.7/docs/assets/js/ie10-viewport-bug-workaround.js')}}"></script>
    <script>
      $(document).on('click', "[data-opt='praise']", function(){
        $.ajax({
          url:'{{url('blog/praise', $blog_info->article_id)}}',
          data:'',
          type:'get',
          dataType:'json',
          success:function(data){
            if(data.success == 1){
              var praise_num = $("[data-field='praise_num']").text();
              $("[data-field='praise_num']").text(parseInt(praise_num)+1);
              $("[data-type='heart']").addClass('glyphicon-heart');
              $("[data-type='heart']").removeClass('glyphicon-heart-empty');
            }
          }
        })
      })
    </script>
  </body>
</html>
